<template>
  <div>
    <FilterTable
      ref="additionalTable"
      :columns="additionalItemsColumns"
      :dataSource="additionalItemsList"
      :isToperInfo="false"
      :isColumnFilter="false"
      :isMemoryPagination="true"
      :height="200"
      :isSelectColumn="false"
      :onColumnsChange="columns => (this.additionalItemsColumns = columns)"
    ></FilterTable>
    <BaseDialog title="收费对象" :visible.sync="payObjShow" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <PayObj
        ref="partPayObj"
        @close="
          val => {
            this.payObjShow = val;
          }
        "
      />
    </BaseDialog>
  </div>
</template>

<script>
import moment from 'moment';
import PayObj from './payObj';
import { getAddItemPayObject } from '@/api/finance/repairFinance/cancelFinance';
export default {
  name: 'Additionalitems',
  components: { PayObj },
  props: ['vehicleDetailsVin', 'list', 'resetTable'],
  data() {
    this.BaseTable = null;
    return {
      payObjShow: false,
      additionalItemsColumns: this.createAdditionalItemsColumns(),
      additionalItemsList: []
    };
  },
  watch: {
    list(val) {
      this.insertRecords(val);
    },
    resetTable(val) {
      if (val) {
        // this.BaseTable.RESET_TABLE_DATA();
        this.additionalItemsList = [];
      }
    }
  },
  mounted() {
    this.BaseTable = this.$refs.additionalTable.$refs.pageTable;
    if (!this.resetTable) {
      this.insertRecords(this.list);
    }
  },
  created() {
    // this.dmsFunc = {dmsFuncId:35100010};
    // this.protectRepairFun(this.vehicleDetailsVin);
  },
  methods: {
    createAdditionalItemsColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: '',
          width: 80,
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" icon="el-icon-document" onClick={() => this.showPayObj(props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        // {
        //   title: '收费类别',
        //   dataIndex: 'MANAGE_SORT_NAME',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        //   // align:"center"
        // },
        {
          title: '收费区分',
          dataIndex: 'CHARGE_PARTITION_NAME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '附加项目代码',
          dataIndex: 'ADD_ITEM_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '附加项目名称',
          dataIndex: 'ADD_ITEM_NAME',
          width: 150,
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '附加项目费',
          dataIndex: 'ADD_ITEM_AMOUNT',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2
          // align:"center"
        },
        {
          title: '折让金额',
          dataIndex: 'DISCOUNT_AMOUNT',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2
          // align:"center"
        },
        {
          title: '折扣率',
          dataIndex: 'DISCOUNT',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2
          // align:"center"
        },
        {
          title: '实收金额',
          dataIndex: 'REAL_RECEIVE_AMOUNT',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2
          // align:"center"
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          width: 150,
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '活动编号',
          dataIndex: 'ACTIVITY_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        }
      ];
    },
    orderListChangeHandle(val) {},
    insertRecords(list) {
      this.additionalItemsList = list;
      // this.BaseTable.EXECUTE_INSERT(list);
    },
    async showPayObj(row) {
      console.log(row, '附加项目的行数据');
      this.payObjShow = true;
      let res = await getAddItemPayObject(row.OWNER_CODE, row.ITEM_ID);
      let param = {};
      console.log(res.data, '---数据--');
      param['receivableAmount'] = row.ADD_ITEM_AMOUNT;
      param['realReceiveAmount'] = row.REAL_RECEIVE_AMOUNT;
      setTimeout(() => {
        // console.log(this.$refs.detail)
        this.$refs.partPayObj.openModel(param, res.data);
      }, 150);
    }
  }
};
</script>

<style lang="less">
.custom-wrap {
  height: calc(100vh - 145px);
  // position: relative;
}
</style>
